<template>
  <div>
    <search-form
      ref="refSearch"
      :shop-list="shopList"
      @search="handleSearch"
    />

    <el-collapse v-model="activeNames" style="margin-top:20px">
      <el-collapse-item title="产品类型数据分析" name="1">
        <template slot="title">
          <span style="font-weight:bold"> 产品类型数据分析</span>
        </template>
        <div v-loading="dataLoading" class="contain-box">
          <div class="btn-group">
            <div>
              <el-button size="mini" @click="handleEditItem()">增加指标</el-button>
            </div>
            <div>
              <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
              <el-button type="primary" size="mini" @click="handleChangeStyle('table')">列表</el-button>
              <el-button type="primary" size="mini" @click="handleChangeStyle('bar')">柱状图</el-button>
              <el-button type="primary" size="mini" @click="handleChangeStyle('line')">折线图</el-button>
            </div>
          </div>
          <div v-if="!Object.keys(originData).length" style="color:#888;text-align:center;line-height:260px">
            暂无数据
          </div>
          <div v-else>
            <Table v-if="chartStyle==='table'&&Object.keys(originData).length" :style-num="styleNum" :data-list="originData" />
            <bar-charts v-if="chartStyle==='bar'&&Object.keys(originData).length" :second-list="secondList" :data-list="originData" :series-type="seriesList" :type-list="typeList" :all-list="allData" />
            <line-charts v-if="chartStyle==='line'&&Object.keys(originData).length" :second-list="secondList" :data-list="originData" :series-type="seriesList" :type-list="typeList" :all-list="allData" />
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="产品尺寸价格段分析" name="2">
        <template slot="title">
          <span style="font-weight:bold"> 产品尺寸价格段分析</span>
        </template>
        <div v-loading="dataLoading1" class="contain-box">
          <el-collapse v-model="activeNamesItem">
            <el-collapse-item v-for="(item,index) in originData1" :key="index" :name="index">
              <template #title>
                <div class="btn-group">
                  <div>
                    <el-button size="mini" @click.stop="handleEditItem(item.indexId)">编辑指标</el-button>
                    <el-button size="mini" @click.stop="handleDeleteItem(item.indexId)">删除指标</el-button>
                  </div>
                  <div>
                    <el-button type="primary" size="mini" @click.stop="handleExport">导出</el-button>
                    <el-button type="primary" size="mini" @click.stop="handleChangeStyle1('table',index)">列表</el-button>
                    <el-button type="primary" size="mini" @click.stop="handleChangeStyle1('bar',index)">柱状图</el-button>
                    <el-button type="primary" size="mini" @click.stop="handleChangeStyle1('line',index)">折线图</el-button>
                  </div>
                </div>
              </template>
              <div v-if="!Object.keys(item).length" style="color:#888;text-align:center;line-height:260px">
                暂无数据
              </div>
              <div v-else>

                <Table v-if="item.chartStyle1==='table'||!item.chartStyle1&&Object.keys(item).length" :style-num="(item.secondCategoryList&&item.secondCategoryList.length)||1" :data-list="item" />
                <bar-charts v-if="item.chartStyle1==='bar'&&Object.keys(item).length" :data-list="item" :table-type="'prices'+index" :second-list="item.secondCategoryList||[]" :series-type="item.seriesList" :type-list="item.firstCategoryList" />
                <line-charts v-if="item.chartStyle1==='line'&&Object.keys(item).length" :data-list="item" :table-type="'prices'+index" :second-list="item.secondCategoryList||[]" :series-type="item.seriesList" :type-list="item.firstCategoryList" />
              </div>
            </el-collapse-item>
          </el-collapse>

          <!-- <div v-for="(item,index) in originData1" :key="index">
            <div class="btn-group">
              <div>
                <el-button size="mini" @click="handleEditItem(1)">编辑指标</el-button>
                <el-button size="mini" @click="handleDeleteItem(item.indexId)">删除指标</el-button>
              </div>
              <div>
                <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
                <el-button type="primary" size="mini" @click="handleChangeStyle1('table',index)">列表</el-button>
                <el-button type="primary" size="mini" @click="handleChangeStyle1('bar',index)">柱状图</el-button>
                <el-button type="primary" size="mini" @click="handleChangeStyle1('line',index)">折线图</el-button>
              </div>
            </div>
            <div v-if="!Object.keys(item).length" style="color:#888;text-align:center;line-height:260px">
              暂无数据
            </div>
            <div v-else>

              <Table v-if="item.chartStyle1==='table'||!item.chartStyle1&&Object.keys(item).length" :style-num="(item.secondCategoryList&&item.secondCategoryList.length)||1" :data-list="item" />
              <bar-charts v-if="item.chartStyle1==='bar'&&Object.keys(item).length" :data-list="item" :table-type="'prices'+index" :second-list="item.secondCategoryList||[]" :series-type="item.seriesList" :type-list="item.firstCategoryList" />
              <line-charts v-if="item.chartStyle1==='line'&&Object.keys(item).length" :data-list="item" :table-type="'prices'+index" :second-list="item.secondCategoryList||[]" :series-type="item.seriesList" :type-list="item.firstCategoryList" />
            </div>
          </div> -->
        </div>
      </el-collapse-item>
    </el-collapse>
    <edit v-if="addDlgVisible" :detail-data="activeData" :visible.sync="addDlgVisible" @success="refreshData(2)" />
  </div>

</template>
<script>
import searchForm from './SearchForm'
import { getShopList } from '@/api/display/salesData'
import Table from './Table'
import barCharts from './BarCharts'
import lineCharts from './LineCharts'

import edit from './Edit'
import { queryTableData, deleteIndex, queryChildTableData } from '@/api/display/spec'

export default {
  name: 'Spec',
  components: { edit, barCharts, lineCharts, Table, searchForm },
  data() {
    return {
      activeNames: ['1', '2'],
      activeNamesItem: [0],
      dataLoading: false,
      dataLoading1: false,
      addDlgVisible: false,
      styleNum: 1,
      styleNum1: 1,
      typeList: [],
      typeList1: [],
      secondList: [],
      secondList1: [],
      originData: {},
      originData1: {},
      seriesList: [],
      seriesList1: [],
      chartStyle: 'table',
      chartStyle1: 'table',
      allData: [],
      allData1: [],
      formData: { month: ['2022-11', '2023-04'] },
      dataList: {}, // 显示数据
      dataList1: {}, // 显示数据
      activeData: {},
      otherFilters: [],
      params: {},
      tableSelected: {},
      shopCode: '',
      shopList: []
    }
  },
  created() {
    getShopList().then(res => {
      if (res.success && res.data.length > 0) {
        this.shopList = res.data
        this.shopCode = res.data[0].shopCode
        this.$refs.refSearch.updateValue('shopCode', res.data[0].shopCode)
        // const str = '[' + this.formData.month.join(',') + ']'
        const str = '2022-11, 2022-12, 2023-01, 2023-02, 2023-03, 2023-04'
        this.otherFilters = [
          // { 'id': 'series', 'property': 'series', 'operator': '=', 'value':  },
          // { 'id': 'shopCode', 'property': 'shopCode', 'operator': '=', 'value': },
          // { 'id': 'superCategoryCode', 'property': 'superCategoryCode', 'operator': '=', 'value': '4158' },
          { 'id': 'month', 'property': 'month', 'operator': 'in', 'value': str }]
        this.params = {
          series: 'A',
          shopCode: res.data[0].shopCode,
          superCategoryCode: '4158',
          firstCategory: 'B'
        }
        this.refreshData()
      } else {
        this.$message.warning('当前用户下没有门店')
      }
    })
  },
  mounted() {
  },
  methods: {
    reduMonths(startMonth, endMonth) {
      const startY = startMonth.split('-')[0]
      const startM = startMonth.split('-')[1]
      const endY = endMonth.split('-')[0]
      const endM = endMonth.split('-')[1]
      startMonth = startY + startM
      endMonth = endY + endM
      if (startMonth > endMonth) {
        const reduY = startY - endY
        const reduM = startM - endM
        return reduY * 12 + reduM + 1
      } else if (startMonth < endMonth) {
        const reduY = endY - startY
        const reduM = endM - startM
        return reduY * 12 + reduM + 1
      } else {
        return 1
      }
    },

    // console.log("月份差：",reduMonths("2020-10","2022-01"))
    handleEditItem(indexId) {
      if (indexId) this.activeData = { id: indexId }
      else this.activeData = {}
      this.addDlgVisible = true
    },
    handleDeleteItem(indexId) {
      this.$confirm(`是否删除指标?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteIndex(indexId).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            queryChildTableData().then(res => {
            // 重新获取指标
            })
          }
        })
      }).catch(() => {})
    },
    // 搜索
    handleSearch(data) {
      this.otherFilters = data.filtersRaw
      this.params = data.paramsRaw
      // if (this.formData.month) {
      //   const str = '2023-01,2023-02,2023-03,2023-04,2023-05,2023-06'
      //   this.otherFilters = [{ 'id': 'month', 'property': 'month', 'operator': 'in', 'value': str }]
      //   this.params = {}
      //   data.filtersRaw.forEach(v => {
      //     this.$set(this.params, v.id, v.value)
      //   })
      // } else {
      //   this.otherFilters = []
      //   this.params = {}
      //   data.filtersRaw.forEach(v => {
      //     this.$set(this.params, v.id, v.value)
      //   })
      // }
      this.refreshData()
    },
    initData(dataList) {
      this.seriesList = dataList
      this.typeList = dataList.firstCategoryList
      const keyList = Object.keys(dataList).filter(v => Number(v) >= 0)
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        datas.push(dataList[keyList[i]])
      }
      const allList = []
      for (let j = 0; j < this.typeList.length; j++) {
        const list = []
        for (let k = 0; k < datas.length; k++) {
          if (datas[k][0] === this.typeList[j]) {
            list.push(datas[k].splice(1))
          }
        }
        allList.push({ type: this.typeList[j], list: list })
      }
      return allList
    },
    initData1(dataList) {
      this.seriesList1 = dataList.seriesList
      this.typeList1 = dataList.firstCategoryList
      const keyList = Object.keys(dataList).filter(v => Number(v) >= 0)
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        datas.push(dataList[keyList[i]])
      }
      const allList = []
      for (let j = 0; j < this.typeList1.length; j++) {
        const list = []
        for (let k = 0; k < datas.length; k++) {
          if (datas[k][0] === this.typeList1[j]) {
            list.push(datas[k].splice(1))
          }
        }
        allList.push({ type: this.typeList1[j], list: list })
      }
      return allList
    },
    handleChangeStyle(value = '') {
      this.chartStyle = value
    },
    handleChangeStyle1(value = '', index) {
      this.$set(this.originData1[index], 'chartStyle1', value)
    },
    handleExport() {

    },
    // 清空搜索
    clearSearch(data) {
    },
    refreshData(type) {
      if (type === 2) {
        // 子列表
        this.chartStyle1 = ''
        this.dataLoading1 = true
        queryChildTableData(this.otherFilters, this.params).then(res => {
          if (res.success) {
            this.originData1 = JSON.parse(JSON.stringify(res.data))
            this.styleNum1 = (res.data.secondCategoryList && res.data.secondCategoryList.length) || 1
            this.seriesList1 = res.data.seriesList
            this.typeList1 = res.data.firstCategoryList
            this.secondList1 = res.data.secondCategoryList
            this.chartStyle1 = 'table'
            this.dataLoading1 = false
          }
        }).catch(() => {
          this.dataLoading1 = false
        })
      } else {
        this.dataLoading = true
        this.chartStyle = ''
        queryTableData(this.otherFilters, this.params).then(res => {
          if (res.success) {
            this.originData = JSON.parse(JSON.stringify(res.data))
            this.styleNum = (res.data.secondCategoryList && res.data.secondCategoryList.length) || 1
            this.seriesList = res.data.seriesList
            this.typeList = res.data.firstCategoryList
            this.secondList = res.data.secondCategoryList
            this.chartStyle = 'table'
            this.dataLoading = false
          }
        }).catch(() => {
          this.dataLoading = false
        })
        // 子列表
        this.chartStyle1 = ''
        this.dataLoading1 = true
        queryChildTableData(this.otherFilters, this.params).then(res => {
          if (res.success) {
            this.originData1 = JSON.parse(JSON.stringify(res.data))
            this.styleNum1 = (res.data.secondCategoryList && res.data.secondCategoryList.length) || 1
            this.seriesList1 = res.data.seriesList
            this.typeList1 = res.data.firstCategoryList
            this.secondList1 = res.data.secondCategoryList
            this.chartStyle1 = 'table'
            this.dataLoading1 = false
          }
        }).catch(() => {
          this.dataLoading1 = false
        })
      }
    }

  }

}
</script>
<style lang="scss" scoped>
.btn-group{
  padding:10px 0;
  display: flex;
  width: 80%;
  justify-content: space-between;
}
.contain-box{
  min-height: 260px;
  // margin: 0 90px;
//   display: flex;
//  align-self: center;
}
</style>
